<template>
    <div class="app-container output">
        <el-card :header="$t('Output Config')" v-if="hardware?.function?.videoOut">
            <el-form v-model="outputData" label-width="100px" style="width: 75%;margin:0 auto">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item :label="$t('Mix enable')">
                            <el-switch v-model="outputEnable" inline-prompt active-text="ON"
                                inactive-text="OFF"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <outputConfigForm type="left" :data="outputData.output" :configOptions="configOptions"
                            :hardware="hardware"></outputConfigForm>
                    </el-col>
                    <el-col :span="12">
                        <outputConfigForm type="right" :data="outputData.output2" :configOptions="configOptions"
                            :hardware="hardware"></outputConfigForm>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <div class="btns">
            <el-button type="primary" size="large" @click="save">{{ $t('Save') }}</el-button>
        </div>
    </div>
</template>

<script setup name="output">
import modal from "@/plugins/modal.js"
import RPC from "@/api/rpc"
import getJson from "@/api/getJson"
import i18n from '@/lang'
import { nextTick } from 'vue'
import outputConfigForm from './components/outputConfigForm.vue'


let hardware = reactive({})
let config = reactive([])
let configOptions = ref([])
let outputData = reactive({})
let outputEnable = ref(false)
handleInit()
function handleInit() {
    config.length = 0
    configOptions.value = []
    let p1 = getJson('/config/hardware.json')
    let p2 = getJson('/config/config.json')

    Promise.all([p1, p2]).then(res => {

        let [r1, r2] = res

        hardware = Object.assign(hardware, r1.data)

        config.push(...r2.data)

        config.forEach(conf => {

            configOptions.value.push({ value: conf.id, label: conf.name })

            if (conf.type == "mix") {
                outputData = Object.assign(outputData, conf)
                outputEnable.value = conf.enable
            }
        })
    })
}




function save() {

    config.find(item => item.type == 'mix').enable = outputEnable.value

    console.log(config)

    RPC("enc.update", [JSON.stringify(config, null, 2)]).then(res => {
        modal.msgSuccess(i18n.global.t('Save success'))
        nextTick(() => {
            handleInit();
        })
    }).catch(() => {
        modal.msgError(i18n.global.t('Save failed'))
    })
}



</script>

<style lang='scss' scoped>
.output {

    .btns {
        text-align: center;
        margin-top: 20px;
    }
}
</style>